<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-25 17:20:57
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-25 17:23:34
 * @FilePath: \appGly\components\formz\components\calendar.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="">
    <u-form-item :label="item.label" :prop="item.value" borderBottom>
      <view class="pcstext" @click="btntap">
        {{ value || item.placeholder }}
      </view>
    </u-form-item>

    <u-calendar
      :show="show"
      :min-date="mindate"
      :max-date="maxdate"
      @confirm="change"
      @close="show = false"
    ></u-calendar>
  </view>
</template>

<script>
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },

      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
      value: {
        type: [String, Number],
        default: () => {
          return "";
        },
      },
    },
    data() {
      return {
        show: false,
        modalvalue: "",
        count: 5,
        mindate: uni.$u.timeFormat(),
        maxdate: "2099-01-01",
      };
    },
    methods: {
      btntap() {
        if (this.disabled) {
          return;
        }
        this.show = true;
        console.log(1111111);
      },
      change(data) {
        this.show = false;
        this.$emit("input", data[0]);
      },
    },
    watch: {
      value: {
        handler: function (val, oldVal) {
          this.modalvalue = val;
        },
        immediate: true,
      },
      modalvalue: {
        handler: function (val, oldVal) {
          this.$emit("input", String(val));
        },
        immediate: true,
      },
    },
  };
</script>

<style>
  .pcstext {
    width: 100%;
  }
</style>
